<template>
  <div class="luck-draw">
    <div class="luck-grid-wrap">
      <div class="luck-grid">
        <div v-for="(item, index) in prizes" :key="index" class="prize-box" :class="{'active': rollIndex == index}">
          <img :src="item.prizesImg" alt="" class="prizes-img"/>
          <p class="prizes-name">{{item.prizesName}}-{{item.position}}</p>
        </div>
        <div class="draw-count">
          <div class="count-num">{{drawCount}}</div>
          <p class="count-desc">抽奖次数</p>
        </div>
      </div>
      <div class="draw-btn" @click="startDraw"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index2',
  data() {
    return {
      drawCount: 3,   // 抽奖次数
      bReady: true,    // 抽奖开关
      timer: null,
      rollPrize: [0,1,2,4,7,6,5,3],
      rollIndex: null,
      prizes: [
        { prizesImg: require('./img/prizes_1.png'), prizesName: '金币100', position: 0 },
        { prizesImg: require('./img/prizes_1.png'), prizesName: 'iPhone 12', position: 1 },
        { prizesImg: require('./img/prizes_1.png'), prizesName: '红包碎片200', position: 2 },
        { prizesImg: require('./img/prizes_1.png'), prizesName: '超级红包500', position: 7 },
        { prizesImg: require('./img/prizes_1.png'), prizesName: '戴森吹风机', position: 3},
        { prizesImg: require('./img/prizes_1.png'), prizesName: '现金888元', position: 6 },
        { prizesImg: require('./img/prizes_1.png'), prizesName: '红包碎片100', position: 5  },
        { prizesImg: require('./img/prizes_1.png'), prizesName: '红包碎片1000', position: 4 },
      ]
    }
  },
  methods: {
    startDraw() {
      if(this.drawCount>0) {
        if(this.bReady) {
          this.bReady = false
          let num = parseInt(Math.random()*8,10)
          this.initDraw(num)
        }
      } else {
        this.$toast('没有抽奖机会了~')
      }
    },
    initDraw(num) {
      let _this = this
      let i = 0 // 定义一个i 用来计算抽奖跑动的次数
      let t = 200 // 抽奖跑动的速度 初始为200毫秒
      let rounds = 5  //抽奖转动的圈数
      let rNum = rounds*8  //标记跑动的次数（这是一个条件判断分界线）
      this.timer = setTimeout(scrollGrid, t)
      function scrollGrid() {
        _this.rollIndex = null
        _this.rollIndex = _this.rollPrize[i%8]
        i++
        if(i< rNum-8) {
          _this.timer = setTimeout(scrollGrid, t)
        } else if (i>= rNum-8 && i< rNum+num) {
          //t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低
          t+=(i-rNum+8)*5;
          _this.timer = setTimeout(scrollGrid, t);//继续执行抽奖滚动
        }
        if(i>= rNum+num) {
          clearTimeout(_this.timer);
          setTimeout(() => {
            _this.drawCount--
            _this.$toast(`恭喜你抽中了${_this.prizes[_this.rollPrize[num-1]].prizesName}`)
            _this.bReady = true;//当计时器结束后让span标签变为抽奖状态
          },500)


        }
      }
    }
  }
}
</script>

<style scoped lang="less">
    .luck-draw {
        min-height: 100vh;
        background-image: url("./img/xryl_cj_bg.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-color: #b9e8fb;
        padding-top: 117px;

        .luck-grid-wrap {
            height: 1230px;
            background-image: url("./img/xryl_cj_yxj.png");
            background-size: 100%;
            padding: 274px 90px 100px;
            position: relative;

            .luck-grid {
                width: 562px;
                height: 582px;
                display: flex;
                justify-content: space-between;
                align-items: stretch;
                flex-wrap: wrap;
                position: relative;

                .prize-box {
                    width: 33.33%;
                    height: 194px;
                    position: relative;
                    &:after {
                        content: '';
                        display: none;
                        width: 144px;
                        height: 144px;
                        background-image: url('./img/paopao.png');
                        background-size: 100% 100%;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        margin-left: -72px;
                    }
                    &.active:after {
                        display: block;
                    }

                    &:nth-child(4) {
                        margin-right: 33.33%;
                    }
                    .prizes-img {
                        margin: 0 auto;
                        display: block;
                        width: 144px;
                        height: 144px;
                    }
                    .prizes-name {
                        color: #ffffff;
                        text-align: center;
                    }
                }

                .draw-count {
                    width: 33.33%;
                    height: 194px;
                    position: absolute;
                    top: 194px;
                    left: 33.33%;
                    .count-num {
                        margin: 7px auto 5px;
                        width: 127px;
                        height: 127px;
                        line-height: 127px;
                        background-image: url('./img/xryl_cjcs_bg.png');
                        background-size: 100% 100%;
                        text-align: center;
                        font-size: 66px;
                        font-weight: bold;
                        color: #FDFFF0;
                        user-select: none;
                    }
                    .count-desc {
                        margin: 0 auto;
                        width: 148px;
                        height: 46px;
                        line-height: 46px;
                        background: #231F80;
                        border-radius: 23px;
                        text-align: center;
                        font-size: 24px;
                        font-weight: 500;
                        color: #FDFFF0;
                        user-select: none;
                    }

                }
            }

            .draw-btn {
                width: 330px;
                height: 126px;
                background-image: url("./img/ljcj_Button_Press.png");
                background-size: 100%;
                position: absolute;
                bottom: 204px;
                left: 212px;
            }

        }
    }
</style>
